import React from 'react'
import { MainLayout } from '../components'

import {
  HomeOutlined,
  SettingOutlined,
  UnorderedListOutlined,
  TableOutlined,
} from '@ant-design/icons'

const Home = React.lazy(() => import('../views/home'))
const Set = React.lazy(() => import('../views/set'))
const List = React.lazy(() => import('../views/list'))
const Table = React.lazy(() => import('../views/table'))
const Login = React.lazy(() => import('../views/login'))

export interface RouterRowState {
  path: string
  element: JSX.Element
  label?: string
  icon?: JSX.Element
  roles?: string[]
  hidden?: boolean
}

export const ROUTER_LIST: RouterRowState[] = [
  {
    path: '/',
    element: (
      <MainLayout>
        <Home></Home>
      </MainLayout>
    ),
    label: '首页',
    icon: <HomeOutlined />,
  },
  {
    path: '/list',
    element: (
      <MainLayout>
        <List></List>
      </MainLayout>
    ),
    label: '列表',
    icon: <UnorderedListOutlined />,
  },
  {
    path: '/table',
    element: (
      <MainLayout>
        <Table></Table>
      </MainLayout>
    ),
    label: '图表',
    icon: <TableOutlined />,
    roles: ['test', 'admin'],
  },
  {
    path: '/set',
    element: (
      <MainLayout>
        <Set></Set>
      </MainLayout>
    ),
    label: '设置',
    icon: <SettingOutlined />,
    roles: ['admin'],
  },
  {
    path: '/login',
    element: <Login></Login>,
    label: '登录',
    icon: <SettingOutlined />,
    hidden: true,
  },
]
